import './case.css'

import 'container-query-polyfill'

import { 
    Tag, 
    Modal, 
    Button,
    Popover,
    Tooltip,
} from "antd"
import { DownOutlined, UpOutlined, RightOutlined } from '@ant-design/icons'
import { useState } from 'react'
import { fillValueHelper } from '@/utils/common'

function Item ({ label, content }) {
    return (
        <div className='text-sm flex'>
            <label 
                className="block after:content-[':']"
                style={{ width: `${(label.length + 1) * 14}px` }}
            >
                {label}
            </label>
            <span 
                className='block'
                style={{ width: `calc(100% - ${label.length * 14 + 6}px)` }}
            >{content}</span>
        </div>
    )
}

function AssociationPopoverContent ({
    association, 
    inputPhoneNumber,
    inputId,
    id, 
    relation, 
    name,
}) {

    let type = ''

    if (association.includes('手机')) {
        type = 'phone'
    }

    if (association.includes('关系')) {
        type = 'relation'
    }

    return (
        <div className='text-sm p-3'>
            <div className='mb-4'>
                <span className=' text-lg'>
                    {association}
                </span>
            </div>
            <div className='flex gap-4 items-center'>
                <label className="block after:content-[':']">
                    输入条件
                </label>
                {
                    type === 'phone'
                        ? (
                            <div 
                                className='block w-[252px] p-2 rounded-md bg-gray-100'
                            >
                                <span className="after:content-[':']">手机号</span>
                                <span className="pl-4">{fillValueHelper(inputPhoneNumber)}</span>
                            </div>
                        )
                        : null
                }
                {
                    type === 'relation'
                        ? (
                            <div 
                                className='block w-[252px] p-2 rounded-md bg-gray-100'
                            >
                                <span className="after:content-[':']">身份证号码</span>
                                <span className="pl-4">{fillValueHelper(inputId)}</span>
                            </div>
                        )
                        : null
                }
                {
                    type === 'relation'
                        ? (
                            <div
                                className='block w-[252px] p-2 rounded-md bg-gray-100'
                            >
                                <span className="after:content-[':']">关联关系</span>
                                <span className="pl-4">{fillValueHelper(relation)}</span>
                            </div>
                        )
                        : null
                }
            </div>
            <div className='flex gap-4 mt-4'>
                <label className="block after:content-[':']">
                    输入结果
                </label>
                <div 
                    className='block w-[252px] p-2 rounded-md bg-gray-100 '
                >
                    <span className="after:content-[':']">身份证号</span>
                    <span className="pl-4">{fillValueHelper(id)}</span>
                </div>
                <div
                    className='block w-[252px] p-2 rounded-md bg-gray-100'
                >
                    <span className="after:content-[':']">姓名</span>
                    <span className="pl-4">{fillValueHelper(name)}</span>
                </div>
            </div>
        </div>
    )
}

export function PoliceCase ({
    date,
    title,
    association,
    content,
    feedback,
    policeCaseNumber,
    numberCallToPolice,
    jurisdiction,
    disputeType,
    disputeSubtype,
    feedbackUnit,
    idOfCallToPolice,
    casePlace,
    caseLevel,
    isCriminalCaseSolved,
    isPublicSecurityCaseFound,
    isDisputeCaseResolved,
    sensitiveCase,
    subjectOfCase,
    isExpanded,
}) {
    return (
        <div className='case-container'>
            <div 
                className={`rounded-md ${isExpanded ? 'bg-[#d6f1f1]' : 'bg-gray-100'} ${isExpanded ? 'text-sm' : 'text-xs'} p-2 cursor-pointer case-wrapper`}
            >
                <div className="flex justify-between items-center">
                    <div>
                        <span>{fillValueHelper(date)}</span>
                    </div>
                    <div className='title'>
                        <span>{fillValueHelper(title)}</span>
                    </div>
                    <div>
                        {association
                            ? (
                                // <Popover 
                                //     content={(
                                //         <AssociationPopoverContent
                                //             title={association?.value}
                                //             association={association?.value}
                                //             inputPhoneNumber={association?.inputPhoneNumber}
                                //             inputId={association?.inputId}
                                //             id={association?.id}
                                //             relation={association?.relation}
                                //             name={association?.name}
                                //         /> 
                                //     )}
                                // >
                                //     <Tag color="#34b7b9">
                                //         {fillValueHelper(association?.value)}
                                //     </Tag>
                                // </Popover>
                                <Tooltip title={fillValueHelper(association?.inputPhoneNumber)}>
                                    <Tag color="#34b7b9">
                                        {fillValueHelper(association?.value)}
                                    </Tag>
                                </Tooltip>
                            )
                            : null
                        }
                        <Tag
                            style={{ 
                                color: '#7f7f7f',
                                borderColor: '#7f7f7f',
                            }}
                        >
                            110警情
                        </Tag>
                    </div>
                </div>
                <div className={`mt-1 ${isExpanded ? '' : 'line-clamp-2'}`}>
                    <span>【报警内容】</span>
                    <span>
                        {fillValueHelper(content)}
                    </span>
                </div>
                <div className={`mt-1 ${isExpanded ? '' : 'line-clamp-2'}`}>
                    <span>【反馈情况】</span>
                    <span>
                        {fillValueHelper(feedback)}
                    </span>
                </div>
                {
                    isExpanded
                        ? (
                            <div className='history-description'>
                                <div className='history-police_case_number'>
                                    <Item label='接警单编号' content={fillValueHelper(policeCaseNumber)}/>
                                </div>
                                <div className='history-number_call_to_police'>
                                    <Item label='报警电话' content={fillValueHelper(numberCallToPolice)}/>
                                </div>
                                <div className='history-jurisdiction'>
                                    <Item label='管辖单位' content={fillValueHelper(jurisdiction)}/>
                                </div>
                                <div className='history-dispute_type'>
                                    <Item label='纠纷类别' content={fillValueHelper(disputeType)}/>
                                </div>
                                <div className='history-dispute_subtype'>
                                    <Item label='纠纷细类' content={fillValueHelper(disputeSubtype)}/>
                                </div>
                                <div className='history-feedback_unit'>
                                    <Item label='反馈单位' content={fillValueHelper(feedbackUnit)}/>
                                </div>
                                <div className='history-id_of_call_to_police'>
                                    <Item label='报警人身份证号' content={fillValueHelper(idOfCallToPolice)}/>
                                </div>
                                <div className='history-case_place'>
                                    <Item label='案发地址' content={fillValueHelper(casePlace)}/>
                                </div>
                                <div className='history-case_level'>
                                    <Item label='警情级别' content={fillValueHelper(caseLevel)}/>
                                </div>
                                <div className='history-is_criminal_case_solved'>
                                    <Item label='是否破获刑事案件' content={fillValueHelper(isCriminalCaseSolved)}/>
                                </div>
                                <div className='history-is_public_security_case_found'>
                                    <Item label='是否查出治安案件' content={fillValueHelper(isPublicSecurityCaseFound)}/>
                                </div>
                                <div className='history-is_dispute_case_resolved'>
                                    <Item label='是否解决纠纷' content={fillValueHelper(isDisputeCaseResolved)}/>
                                </div>
                                <div className='history-sensitive_case'>
                                    <Item label='敏感类警情' content={fillValueHelper(sensitiveCase)}/>
                                </div>
                                <div className='history-subject_of_case'>
                                    {/* <Item label='案由' content={fillValueHelper(subjectOfCase)}/> */}
                                </div>
                            </div>
                        )
                        : null
                }
            </div>
        </div>
    )
}

export function JointInvestigation ({
    date,
    title,
    association,
    content,
    policeContent,
    caseStatus,
    caseCode,
    caseName,
    startTimeOfIncident,
    illegalInfo,
    punishCategory,
    peopleInvolvedCaseCategory,
    crimeSceneDetailAddress,
    currentCoerciveMeasure,
    illegalAct,
    illegalDegree,
    caseCharges,
    prosecutionNumber,
    prosecuteDecisionDate,
    charges,
    actionCause,
    suspectList,
    isExpanded,
}) {

    return (
        <div className='case-container'>
            <div 
                className={`rounded-md ${isExpanded ? 'bg-[#d6f1f1]' : 'bg-gray-100'} ${isExpanded ? 'text-sm' : 'text-xs'} p-2 cursor-pointer case-wrapper`}
            >
                <div className="flex justify-between items-center">
                    <div>
                        <span>{fillValueHelper(date)}</span>
                    </div>
                    <div className='title'>
                        <span>{fillValueHelper(title)}</span>
                    </div>
                    <div>
                        {association
                            ? (
                                // <Popover 
                                //     content={(
                                //         <AssociationPopoverContent
                                //             title={association?.value}
                                //             association={association?.value}
                                //             inputPhoneNumber={association?.inputPhoneNumber}
                                //             inputId={association?.inputId}
                                //             id={association?.id}
                                //             relation={association?.relation}
                                //             name={association?.name}
                                //         /> 
                                //     )}
                                // >
                                //     <Tag color="#34b7b9">
                                //         {fillValueHelper(association?.value)}
                                //     </Tag>
                                // </Popover>
                                <Tooltip title={fillValueHelper(association?.inputPhoneNumber)}>
                                    <Tag color="#34b7b9">
                                        {fillValueHelper(association?.value)}
                                    </Tag>
                                </Tooltip>
                            )
                            : null
                        }
                        <Tag 
                            style={{ 
                                color: '#a30014bf',
                                borderColor: '#a30014bf',
                            }}
                        >
                            协同办案
                        </Tag>
                    </div>
                </div>
                <div className={`mt-1 ${isExpanded ? '' : 'line-clamp-2'}`}>
                    <span>【简要案情】</span>
                    <span>
                        {fillValueHelper(content)}
                    </span>
                </div>
                <div className={`mt-1 ${isExpanded ? '' : 'line-clamp-2'}`}>
                    <span>【警情内容】</span>
                    <span>
                        {fillValueHelper(policeContent)}
                    </span>
                </div>
                {
                    isExpanded
                        ? (
                            <div className='joint_investigation-description'>
                                <div className='joint_investigation-case_status'>
                                    <Item label='案件状态' content={fillValueHelper(caseStatus)}/>
                                </div>
                                <div className='joint_investigation-case_code'>
                                    <Item label='案件编号' content={fillValueHelper(caseCode)}/>
                                </div>
                                <div className='joint_investigation-case_name'>
                                    <Item label='案件名称' content={fillValueHelper(caseName)}/>
                                </div>
                                <div className='joint_investigation-start_time_of_incident'>
                                    <Item label='发案开始时间' content={fillValueHelper(startTimeOfIncident)}/>
                                </div>
                                <div className='joint_investigation-illegal_info'>
                                    <Item label='违法信息' content={fillValueHelper(illegalInfo)}/>
                                </div>
                                <div className='joint_investigation-punish_category'>
                                    <Item label='处罚种类' content={fillValueHelper(punishCategory)}/>
                                </div>
                                <div className='joint_investigation-people_involved_case_category'>
                                    <Item label='人员涉案类别' content={fillValueHelper(peopleInvolvedCaseCategory)}/>
                                </div>
                                <div className='joint_investigation-crime_scene_detail_address'>
                                    <Item label='案发地点详址' content={fillValueHelper(crimeSceneDetailAddress)}/>
                                </div>
                                <div className='joint_investigation-current_coercive_measure'>
                                    <Item label='当前强制措施' content={fillValueHelper(currentCoerciveMeasure)}/>
                                </div>
                                <div className='joint_investigation-illegal_act'>
                                    <Item label='违法行为' content={fillValueHelper(illegalAct)}/>
                                </div>
                                <div className='joint_investigation-illegal_degree'>
                                    <Item label='违法程度' content={fillValueHelper(illegalDegree)}/>
                                </div>
                                <div className='joint_investigation-case_charges'>
                                    <Item label='涉案罪名' content={fillValueHelper(caseCharges)}/>
                                </div>
                                <div className='joint_investigation-prosecution_number'>
                                    <Item label='起诉书号' content={fillValueHelper(prosecutionNumber)}/>
                                </div>
                                <div className='joint_investigation-prosecute_decision_date'>
                                    <Item label='起诉决定时间' content={fillValueHelper(prosecuteDecisionDate)}/>
                                </div>
                                <div className='joint_investigation-charges'>
                                    <Item label='起诉罪名' content={fillValueHelper(charges)}/>
                                </div>
                                <div className='joint_investigation-action_cause'>
                                    {/* <Item label='案由' content={fillValueHelper(actionCause)}/> */}
                                </div>
                            </div>
                        )
                        : null
                }
                {/* {
                    isExpanded
                        ? (
                            (suspectList ?? []).map(({ name, id }, index) => {
                                return (
                                    <div className='flex grid-2 mt-2 suspect-wrapper' key={index}>
                                        <div className='flex-1'>
                                            <Item label={`嫌疑人姓名${index + 1}`} content={fillValueHelper(name)}/>
                                        </div>
                                        <div className='flex-[2_2_0%] ml-1'>
                                            <Item label={`嫌疑人身份证号${index + 1}`} content={fillValueHelper(id)}/>
                                        </div>
                                    </div>
                                )
                            })
                        )
                        : null
                } */}
            </div>
        </div>
    )
}

export default function Case ({ type, detail }) {

    const [isExpanded, setIsExpanded] = useState(() => (false))
    const handleClickShowMore = () => { setIsExpanded(() => (true)) }
    const handleClickCloseShowMore = () => { setIsExpanded(() => (false)) }

    return (
        <>
            {
                type === 'police_case'
                    ? (<PoliceCase isExpanded={false} {...detail} />)
                    : null
            }
            {
                type === 'joint_investigation'
                    ? (<JointInvestigation  isExpanded={false} {...detail} />)
                    : null
            }
            <div className="flex justify-end">
                <div className="flex cursor-pointer items-center mt-1" onClick={handleClickShowMore}>
                    <div>
                        <span className='text-sm text-gray-400'>
                            查看更多
                        </span>
                    </div>
                    <div>
                        <RightOutlined style={{ fontSize: '12px', color: '#93a3af'}}/>
                    </div>
                </div>
            </div>
            <Modal 
                title={detail.title} 
                open={isExpanded}
                onCancel={handleClickCloseShowMore}
                footer={[
                    <Button key="back" onClick={handleClickCloseShowMore}>
                        关闭
                    </Button>
                ]}
                width={800}
            >
                {
                    type === 'police_case'
                        ? (<PoliceCase isExpanded={true} {...detail} />)
                        : null
                }
                {
                    type === 'joint_investigation'
                        ? (<JointInvestigation isExpanded={true} {...detail} />)
                        : null
                }
            </Modal>
        </>
    )
}